<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
			@scrolltoupper="upper" lower-threshold="112">
			<view class="merchantList">
				<view class="ArrList">
					<view class="List" v-for="(item,index) in fenecList" :key="index">
						<view class="merchan-data">
							<view class="imgData">
								<img style="max-width: 100rpx;max-height: 100rpx;" src="@/static/ListEndPoints.png"
									alt="" />
							</view>
							<view class="text">
								<title style="margin-top: 15rpx;font-size: 25rpx;color: #242f66;">
									SN号：{{item.snNumber || ""}}
								</title>
								<title style="margin-top: 2rpx;font-size: 22rpx;color: #242f66;">
									品牌：{{item.brandName || ""}}
								</title>
								<title style="margin-top: 2rpx;font-size: 22rpx;color: #242f66;">
									负责人：{{item.personCharge || ""}}
								</title>
								<title style="margin-top: 2rpx;font-size: 22rpx;color: #242f66;">
									联系电话：{{item.contactNumber || ""}}
								</title>
							</view>

							<view class="" style="margin: 26rpx 20rpx 10rpx 15rpx;">
								<view class="button-wrap1">
									<uv-button type="primary" size="mini  " text="报修" @click="repair"></uv-button>
								</view>
								<view class="button-wrap2">
									<uv-button type="primary" size="mini  " text="变更门店"
										@click="unbind(item)"></uv-button>
								</view>
							</view>
						</view>
					</view>
					<uv-picker ref="picker" :columns="columns" keyName="shopName" @confirm="confirm"></uv-picker>
				</view>
			</view>
		</scroll-view>
		<view class="button-wrap">
			<!-- 新增终端绑定 -->
			<!-- 			<button class="button-login" @click="navigateToAccountLogin">
				<text class="wx-login loginText1">新增终端绑定</text>
			</button> -->
		</view>



		<uv-popup ref="popup" mode="bottom" :closeOnClickOverlay="false" :closeable="true" :round="10" @change="change">
			<view style="display: flex;justify-content: center;">
				<view style="height: 900rpx;width: 90%;margin-top: 35rpx;">
					<title style="color: #242f66;font-size: 30rpx;">
						为何解绑
					</title>
					<uv-radio-group v-model="radiovalue" placement="column" @change="checkbox">
						<view class="text-5" style="margin-top: 10%;">
							<view class="text-1">
								<view class="text-2">
									<view class="imgData-1">
										<img style="max-width: 110rpx;max-height: 110rpx;"
											src="@/static/cancellation.png" alt="" />
									</view>
								</view>
								<view class="text-3">
									<uv-input v-model="list.value" border="none"></uv-input>
								</view>
								<view class="text-4">
									<uv-radio name="1" size="25"></uv-radio>
								</view>
							</view>
						</view>
						<view class="text-5">
							<view class="text-1">
								<view class="text-2">
									<view class="imgData-1">
										<img style="max-width: 110rpx;max-height: 110rpx;" src="@/static/fault.png"
											alt="" />
									</view>
								</view>
								<view class="text-3">
									<uv-input v-model="list.value1" border="none"></uv-input>
								</view>
								<view class="text-4">
									<uv-radio name="2" size="25"></uv-radio>
								</view>
							</view>
						</view>
						<view class="text-5">
							<view class="text-1">
								<view class="text-2">
									<view class="imgData-1">
										<img style="max-width: 110rpx;max-height: 110rpx;" src="@/static/Replace.png"
											alt="" />
									</view>
								</view>
								<view class="text-3">
									<uv-input v-model="list.value2" border="none"></uv-input>
								</view>
								<view class="text-4">
									<uv-radio name="3" size="25"></uv-radio>
								</view>
							</view>
						</view>
						<view class="text-5">
							<view class="text-1">
								<view class="text-2">
									<view class="imgData-1">
										<img style="max-width: 110rpx;max-height: 110rpx;" src="@/static/other.png"
											alt="" />
									</view>
								</view>
								<view class="text-3">
									<uv-input v-model="list.value3" border="none"></uv-input>
								</view>
								<view class="text-4">
									<uv-radio name="4" size="25"></uv-radio>
								</view>
							</view>
						</view>
					</uv-radio-group>
					<view class="button-wrap" style="margin-top: 70rpx;">
						<!-- 确定 -->
						<button class="button-login" @click="navigate" style="width: 100%;">
							<text class="wx-login loginText1">确定</text>
						</button>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		posInfo
	} from "@/network/mine.js"
	export default {
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			}
		},
		data() {
			return {
				query: {},
				params: {
					page: 1,
					pageSize: 10,
				},
				show: false,
				columns: [],
				snNumber: "",
				mchId: "",
				list: {
					value: "商户注销",
					value1: "终端故障",
					value2: "更换终端",
					value3: "其它"
				},
				radiovalue: "",
				fenecList: {},
				total: 0,
			}
		},
		onLoad(e) {
			const arr = uni.getStorageSync('listData')
			this.query.orgCode = arr.merNo
			this.merchantList()
		},
		methods: {
			// onShow1() {
			// 	const arr = uni.getStorageSync('listData')
			// 	console.log(arr)
			// 	this.query.orgCode = arr.merNo
			// 	this.onPullDownRefresh1();
			// },
			// onPullDownRefresh1() {
			// 	this.params.page = 1;
			// 	this.merchantList()
			// },
			// onReachBottom1() {
			// 	if (this.params.page * this.params.pageSize < this.total) {
			// 		this.params.page = this.params.page + 1
			// 		this.merchantList()
			// 	}
			// },
			merchantList() {
				uni.request({
					url: 'http://192.168.3.15:8085/asset/getAssetBindTerminals/' + 22, // 第一个API地址
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							console.log('请求1成功，数据为：', res.data);
							this.fenecList = res.data.data
						}
					},
					fail: (err) => {
						console.error('请求1失败：', err);
						uni.showToast({
							title: res.data.message
						})
					}
				});
			},
			changeSearch() {
				this.merchantList()
			},
			upper() {
				this.params.page = 1;
				this.merchantList()
			},
			lower() {
				if (this.params.page * this.params.pageSize < this.total) {
					this.params.page = this.params.page + 1
					this.merchantList()
				}
			},
			checkbox(e) {
				console.log(e)
			},
			navigate() {

			},
			repair() {
				wx.navigateTo({
					url: '/pages_subPack/mine/terminal/bound/endPointRepair'
				})
			},
			unbind(item) {
				console.log(item);
				this.mchId = item.mchId
				this.snNumber = item.snNumber
				this.columns = []
				uni.request({
					url: 'http://192.168.3.15:8085/warehouse/queryMch',
					method: 'post', //get、post、delete
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.columns.push(res.data.result.data.rows)
							console.log(this.columns);
						}
					},
					fail: (err) => {
						console.error('请求1失败：', err);
						uni.showToast({
							title: res.data.message
						})
					}
				});
				this.$refs.picker.open();
			},
			confirm(e) {
				console.log('confirm', e);
				let that = this;
				uni.showModal({
					title: '提示',
					content: '你确定要更变门店吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('确定');
							uni.request({
								url: 'http://192.168.3.15:8085/asset/assetChangeSn',
								method: 'post', //get、post、delete
								data: {
									mchId: that.mchId,
									snNumber: that.snNumber,
									afterMchId: e.value[0].merNo
								},
								success: (res) => {
									console.log(res);
									if (res.data.code == 200) {
										uni.showToast({
											title: "更变成功",
											icon: 'success',
											duration: 2000
										})
									} else {
										uni.showToast({
											title: "更变失败",
											icon: 'none',
											duration: 2000
										})
									}
								},
								fail: (err) => {
									console.error('请求1失败：', err);
									uni.showToast({
										title: res.data.message
									})
								}
							});
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			},

			navigateToAccountLogin() {
				wx.navigateTo({
					url: '/pages_subPack/mine/terminal/bound/addEndPoint'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.content {
		width: 90%;
	}

	.search {
		margin-top: 20rpx;
		height: 110rpx;
	}

	.merchantList {
		background: #f4f4f4;
		width: 100%;
	}

	.merchan {
		margin: 5% 0% 0% 5%;
		font-weight: bold;
		color: #242f66;
	}

	.ArrList {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.List {
		background: #fff;
		height: 160rpx;
		width: 90%;
		border-radius: 20rpx;
		margin-top: 2%;
	}

	.merchan-data {
		display: flex;
	}

	.imgData {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		// background-image: url('../../static/index.png');
		background-size: 100% 100%;
		margin: 30rpx 35rpx 30rpx 35rpx;
	}

	.image {
		max-width: 100rpx;
		max-height: 100rpx;
	}

	.text {
		width: 100%;
		display: flex;
		flex-flow: column;
	}

	.merchan-data-1 {
		display: flex;
		justify-content: center;
	}

	.merchan-data-2 {
		margin-top: 8%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.scrollbox {
		height: calc(95vh);
	}

	.button-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.button-login {
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-wrap2 {
		margin-top: 20rpx;
	}

	.imgData-1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		// background-image: url('../../static/index.png');
		background-size: 100% 100%;
		margin: 8rpx 3rpx 3rpx 8rpx;
	}

	.text-1 {
		display: flex;
		justify-content: space-between;
	}

	.text-3 {
		width: 60%;
		margin-top: 40rpx;
	}

	.text-4 {
		width: 11%;
		margin-top: 40rpx;
	}

	.text-5 {
		background: #efefef;
		height: 127rpx;
		border-radius: 15px;
		margin-top: 20rpx;
	}

	/deep/.uv-popup {
		.uv-input {
			height: 115rpx !important;
		}
	}
</style>